﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>YouTube Data Analysis</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/comon0.css">
</head>
<body>
<div class="loading">
  <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
  <h1>YouTube Data Analysis</h1>
  <div class="time" id="showTime">2019/12/05 16:16:54</div>
    <script>
    var t = null;
    t = setTimeout(time,1000);//开始运行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
       var y=dt.getFullYear();
       var mt=dt.getMonth()+1;
       var day=dt.getDate();
       var h=dt.getHours();//获取时
       var m=dt.getMinutes();//获取分
       var s=dt.getSeconds();//获取秒
       var t = null;
       document.getElementById("showTime").innerHTML = y+"/"+Appendzero(mt)+"/"+Appendzero(day)+" "+Appendzero(h)+":"+Appendzero(m)+":"+Appendzero(s)+"";
        function Appendzero(obj){
			if(obj<10) return "0" +""+ obj;
			else return obj;
		 }
		t = setTimeout(time,1000); //设定定时器，循环运行     
    }
    //滚动框
    $(document).ready(function(){
        var html=$(".wrap ul").html()
        $(".wrap ul").append(html)
        var ls=$(".wrap li").length/2+1
        i=0
        ref = setInterval(function(){
            i++
            if(i==ls){
                i=1
                $(".wrap ul").css({marginTop:0})
                $(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
            }
            $(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)


        },2400);
    })

</script>
	
</div>
<div class="mainbox">
  <ul class="clearfix">
    <li>
  
	  <div class="boxall" style="height: calc(58% - .15rem)">
		<div class="alltitle">The highest 10 categories of no_of_views</div>
		 <div class=" boxnav " id="echarts4">
        </div>
      </div>
      <div class="boxall" style="height: calc(42% - .15rem)">
          <div class="alltitle">The average no_of_comments,max no_of_views & min no_of_rating from each category</div>
          <div class="boxnav" id="echarts3"></div>
        </div>
    </li>
    <li>
<!--        <div class="boxall" style="height: calc(20% - .15rem)">-->
<!--           <ul class="row h100 clearfix">-->
<!--            <li class="col-6">-->
<!--			   <div class="sqzs h100">-->
<!--				<p>数据总览</p>-->
<!--				   <h1><span>30500</span>万</h1>-->
<!--				</div>-->
<!--            </li>-->
<!--            <li class="col-6">-->
<!--                <ul class="row h100 clearfix">-->
<!--                    <li class="col-4">-->
<!--                      <div class="tit01">标题名称</div>-->
<!--                      <div class="piebox" id="pe01"></div>-->
<!--                    </li>-->
<!--                    <li class="col-4">-->
<!--                      <div class="tit01">标题名称</div>-->
<!--                      <div class="piebox" id="pe02"></div>-->
<!--                    </li>-->
<!--                    <li class="col-4">-->
<!--                      <div class="tit01">标题名称</div>-->
<!--                      <div class="piebox" id="pe03"></div>-->
<!--                    </li>-->
<!--                   </ul>-->
<!--            </li>-->
<!--          </ul>-->
<!--      </div>-->
          <div class="boxall" style="height: calc(58% - .15rem)">
              <div class="alltitle">The lowest 10 comments that rating greater than 3 & views less than 500</div>
              <div class="boxnav" id="echarts1"></div>
          </div>
          <div class="boxall" style="height: calc(42% - .15rem)">
              <div class="alltitle">The fifth question</div>
              <div class="boxnav" id="echarts2"></div>
          </div>

    </li>
    <li>
    <div class="boxall" style="height: calc(33.333% - .15rem)">
        <div class="alltitle">The top 20 records no_rating-view are even number</div>
        <!--<div class="boxnav" id="echarts5"></div>-->
        <div class="boxall1" style="height: 2.2rem">
        <!--<div class="alltitle1">id name no_of_rating no_of_views no_of_comments</div>-->
            <div class="wrap">
                <ul>
                    <li>
                        <p>name---no_of_rating---no_of_views</p>
                    </li>
                    <li>
                        <p>Jason275-58850-27721690</p>
                    </li>
                    <li>
                        <p>smpfilms-56767-7939352</p>
                    </li>
                    <li>
                        <p>Frozentoast-43774-10172172</p>
                    </li>
                    <li>
                        <p>thePranker-37247-3010296</p>
                    </li>
                    <li>
                        <p>machinima-35352-3731016</p>
                    </li>
                    <li>
                        <p>TPainVideos-34802-18141492</p>
                    </li>
                    <li>
                        <p>YouGotRickRolled-23256-8119804</p>
                    </li>
                    <li>
                        <p>HouseholdHacker-22030-6101232</p>
                    </li>
                    <li>
                        <p>smosh-20370-6101232</p>
                    </li>
                    <li>
                        <p>bbashmusic-20364-7155928</p>
                    </li>
                    <li>
                        <p>259-19753-5239520</p>
                    </li>
                    <li>
                        <p>RKellyTV-18910-13038204</p>
                    </li>
                    <li>
                        <p>raw64life-17739-6618744</p>
                    </li>
                    <li>
                        <p>smpfilms-56767-7939352</p>
                    </li>
                    <li>
                        <p>TayZonday-16653-3499428</p>
                    </li>
                    <li>
                        <p>hidekatsu-16334-7553998</p>
                    </li>
                    <li>
                        <p>myredroom-15439-7990144</p>
                    </li>
                    <li>
                        <p>mcburger-13898-5360384</p>
                    </li>
                    <li>
                        <p>OMGHEISRETARDEDLOL-5322084-713491</p>
                    </li>
                    <li>
                        <p>fatvids-13342-2464486</p>
                    </li>
                    <li>
                        <p>xsniped-4635992-13314</p>
                    </li>
                </ul>
            </div>
            <div class="boxfoot"></div>
        </div>
    </div>
        <div class="boxall" style="height: calc(66.666% - .30rem)">
            <div class="alltitle">The sixth question </div>
            <div class="boxnav">
                <table border="0" cellspacing="0">
                    <tr>
                        <th>id</th>
                        <th>uploader_name</th>
                        <th>length</th>
                        <th>no_views</th>
                        <th>no_comments</th>
                    </tr>
                    <tr>
                        <th>5olkBYGWDa0</th>
                        <td>aloie</td>
                        <td>1</td>
                        <td>48</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <th>FwRdMhrjw48</th>
                        <td>blind3091</td>
                        <td>1</td>
                        <td>2674</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <th>2s_Qf1XsfYU</th>
                        <td>aloie</td>
                        <td>4</td>
                        <td>60</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <th>pxMiKt4VTHs</th>
                        <td>HOCKROCMAN</td>
                        <td>4</td>
                        <td>79</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <th>Hb772GZNrDc</th>
                        <td>detroitartistdotorg</td>
                        <td>4</td>
                        <td>925</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <th>hn2YV2ldnl8</th>
                        <td> 999plitSoul</td>
                        <td>4</td>
                        <td>25</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <th>bpIpVTJKmmA</th>
                        <td>PLzBMinexInseparableI </td>
                        <td>4</td>
                        <td>899</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <th>DOVq1ww0vHs</th>
                        <td>1mResponder</td>
                        <td>4</td>
                        <td>229</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <th>ZoDL SuSSjks</th>
                        <td>sasuke</td>
                        <td>4</td>
                        <td>44</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <th>BrvPj0qeyf0</th>
                        <td>Sosorockgirl</td>
                        <td>4</td>
                        <td>429</td>
                        <td>3</td>
                    </tr>
                </table>

            </div>

        </div>

<!--	  <div class="boxall" style="height: calc(33.333% - .15rem)">-->
<!--        <div class="alltitle">标题名称</div>-->
<!--		<div class="boxnav" id="echarts6" style="height:calc(100% - .3rem);"></div>-->
<!--      </div>-->
    </li>
  </ul>
</div>
	
<script type="text/javascript" src="js/echarts.min.js"></script> 
<script language="JavaScript" src="js/js.js"></script> 
</body>
</html>
